How To Add An Author Info Box In WordPress Without Any Plugin?
September 24th, 2016 | by Ravi Chahar || 4 Comments |
One of the main parts of a WordPress post is the author info section. Along with every blog post, you would see its author. But do you know how to add an author info box in WordPress theme?
There are many plugins which can help you to add an author box in WordPress. But it’s always good to avoid plugins.
Wouldn’t it be great if you can show an author box without any plugin? Just a little bit of coding and you will have a good-looking author box under your single posts.
In this post, I will walk let you know the perfect code which would help you to show your info, an avatar under every blog post.
Edit The Theme Files To Add Author Box In WordPress.
If you know a little bit about the WordPress theme file structure then it would be great. If not then let me tell you that the output of your single posts is controlled by the single.php file present in your theme folder.
To add author box in WordPress, you have to edit this file. After editing this file, you have to take care of the designing of the author box.
Let me walk you through the process.
Step 1:- Open the single.php file from your theme folder. If you are developing a new theme then just open the file. And if you want to add the author info box in your existing theme then open it from the cPanel.
Step 2:- Add the code in the file under the loop which is showing the content of your blog post. It may be different for all the themes because every developer tries to adapt his own coding style.
The code is:-
<div class=”author-avatar”>
<?php echo get_avatar( get_the_author_meta( ‘user_email’), ’85’, ”); ?>
<div class=”author-description”>
<h3 id=”author-name”> by <?php the_author_link(); ?></h3>
<?php the_author_meta( ‘description’); ?>
</div>
</div>
</div>
This code will show the default author box of WordPress. If you want to increase the size of the image then you can replace the value “85” to anything.
The HTML classes are given, you just have to target them to give a perfect design.
Step 2:- Open the style.css file from your theme folder and start designing. Let me show you an example.
margin: 40px 0px 40px 0px;
background-color: #f4f4f4;}
.author-avatar img {
float: left;
margin: 0px 20px 60px 0px;
border-radius: 50%;
}
.author-description {
text-align: justify;
}
.author-description h3 a {
text-decoration: none;
}
.author-description h3 a:hover {
color: #f9e875;
}
This code will give you a perfect design to your author box. Let me show you the results.
As you can see that the design is perfect with an author image connected to the Gravatar account. You can change the background color of this author box by targeting the main class “author-box”.
If you have a little bit knowledge of CSS then you won’t face any problem in the design.
Would You Still Ask How To Add An Author Info Box In WordPress?
You can just copy and paste this code to the theme files. If you want to do some changes according to the design of your website then all the necessary HTML classes are mentioned above.
I hope the question “how to add an author info box in WordPress” has an answer now. While building a WordPress theme, you must take care of many things. The code should be perfect and short.
I have provided the shortest code possible. I hope this would work for your website. If you still face any problem, feel free to ask.
Related Posts
4 comments
Leave a Reply
Hey Ravi,
Seeing an actual person behind the content helps build credibility and strengthens our site’s authority among users. For single author websites, we need to just add an about me page but for a multi-author WordPress sites, need to add an author info box below each post. These technical things are very significant to make great impact on audience. You have shared amazing technique to make our WordPress incredible.
With best wishes,
Amar kumar
Hi Amar,
Whether you have a single author website or the multi-author website, you have to show the person behind the content. You are right, it’s important to know the person who has generated the quality content.
In a WordPress theme, you can add the code and a nice author box will appear to you.
Thanks for stopping by.
Enjoy the day.
~Ravi
Hi Ravi,
I am using Genesis theme. When I add the code, its giving syntax error. And there is no single.php file in child theme… Please help to set up the author box…. Thanks in advance
Hey Ugyen,
The Syntax error is because you have missed any PHP starting or ending tag. Or maybe you have added something extra. In the Genesis framework, the theme you buy are not the parent themes. They are the child themes carrying all the features of the Genesis framework or any parent theme they have.
It means that the child theme will only consist the files which are needed to alter the layout from the parent theme. So if you have the framework then you can search for the theme files in the cPanel.
~Ravi